\subsection{CSS}\label{sec:css}
In questa sezione verranno descritti i punti salienti nello sviluppo dei file CSS del sito.
\subsubsection{Panoramica}
Per il sito sono stati sviluppati i fogli di stile per la visualizzazione normale su PC, fogli di stile per dispositivi mobile o con schermo piccolo e fogli di stile per la stampa. È stata prestata particolare attenzione al foglio di stile per PC in modo tale che consentisse una efficace lettura da parte degli screen reader.\\
I file CSS sono contenuti nella directory ``styles'' a partire dalla radice base del sito. I fogli di stile principali sono:
\begin{itemize}
\item styleaural.css;
\item stylehandheld.css;
\item styleprint.css;
\item stylescreen.css;
\end{itemize}
Questi file contengono gli stili principali rispettivamente per gli screen reader, dispositivi mobile, stampa e desktop. Il CSS per desktop e mobile è stato sviluppato prevalentemente da Riccardo Tesselli e Christian Cardin. Il CSS per la stampa e il miglioramento dell'accessibilità del sito sono stati presi in carico da Andrea Scaboro.

\subsubsection{CSS per desktop}
Il file stylescreen.css inizialmente definisce gli stili di carattere generale in comune tra le pagine del sito, come ad esempio il logo e i pulsanti di login e registrazione, i breadcrumb e il navigator. Si è cercato di sviluppare il più possibile un layout fluido a seconda della dimensione della finestra di visualizzazione, le dimensioni dei font sono state tutte definite usando unità ``em'' e non pixel. Sono state adottate tecniche di posizionamento che sfruttano le proprietà \texttt{position:relative} e \texttt{position:absolute} per quando riguarda il posizionamento del logo e pulsati di accesso e la visualizzazione della homepage.\\
Lo stile applicato sul navigator crea un effetto a scomparsa/comparsa al passaggio del mouse, nessuno script è stato utilizzato, è stato fatto interamente con CSS, che sfruttano la pseudo classe \texttt{:hover}, inoltre è stata prestata attenzione a rendere sensibile l'area di attivazione del link lungo tutto il pulsante, non solo sulla scritta del menù.\\
Il file inoltre definisce gli stili anche per le singole pagine adottando selettori per \texttt{<div>} univoci.

\subsubsection{CSS per mobile}
Il file stylehandheld.css definisce lo stile per la visualizzazione su dispositivi mobile. Per l'attivazione dello stile si è usato \texttt{<link href="../public\_html/styles/stylehandheld.css" media="handheld, screen and (max-width:480px), only screen and (max-device- width:480px)" rel="stylesheet" type="text/css"/>}, e quindi anche su desktop, se la finestra di visualizzazione ha una larghezza inferiore a 480px, viene comunque applicato questo foglio di stile. In questo caso i browser mettono insieme entrambi i fogli di stile stylescreen.css e stylehandheld.css; per evitare che i browser applicassero stili pensati per finestre di dimensioni maggiori a 480px è stato necessario all'interno del file stylehandheld.css ridefinire tutti gli stili applicati in stylescreen.css, in modo tale da evitare procedimenti a cascata indesiderati. In particolare sono stati ridefiniti i posizionamenti \texttt{absolute}, \texttt{relative} e \texttt{float}, usati nello stile per desktop, e sono stati resi \texttt{static} per il layout mobile, inoltre è stata rivisitata completamente la visualizzazione del navigator, facendolo esplodere in modo tale da consentire una buona navigazione sui piccoli schermi. Sono stati eliminati le proprietà di arrotondamento dei bordi, per semplificare la visualizzazione su tali dispositivi. Alcune immagini superflue sono state rimosse, e introdotte invece link ``Go to content'' prima del navigator, in modo da consentire all'utente di andare direttamente al contenuto della pagina.

\subsubsection{CSS per la stampa}
Il file styleprint.css definisce lo stile per la stampa su carta del sito. È stata posta particolare attenzione ad eliminare contenuto superfluo per la stampa, come ad esempio i menù, i pulsanti di login, footer (in quanto non contengono informazione utile), strumenti di navigazione interna come i link ``go to content'', barre di ricerca, form, sfondi e oggetti nascosti.\\
In linea di massima si è cercato di mantenere un look \& feel simile alla visualizzazione su desktop del sito, mantenendo gli stessi stili per il testo e grafica (come i bordi nei riquadri), mantenendo però un colore nero uniforme.\\
Sempre per mantenere un aspetto simile alla versione desktop, si è deciso di lasciare anche le varie immagini, ma rimpicciolendole nei casi in cui risultavano particolarmente grandi per non obbligare l'utente ad un uso eccessivo d'inchiostro, toner o quant'altro.\\
Nella versione stampata i link esterni contenuti nel sito sono visualizzati con accanto il percorso completo alla fonte esterna. I link interni che rappresentano un'informazione significativa, come ad esempio il nome di una sottocategoria del forum, sono stati visualizzati come del semplice testo. Mentre quelli che hanno come scopo solo lo specificare di una pagina interna al sito, vengono visualizzati con un colore diverso dal testo, che possa essere distinguibile anche in un'eventuale stampa in bianco e nero.


\subsubsection{CSS per screen reader}
Il file styleaural.css nasconde gli elementi di classe ``\texttt{auralNotRead}'', appartengono a questa classe in  genere tutte le informazioni non utili per gli screen reader, come ad esempio alcune immagine prive di significato o con un significato esplicitato e priori.